<template>
    <el-row class="contain-box">
        <site-nav>&emsp;>&emsp;<strong><i>{{dutyName}}</i></strong></site-nav>
        <div class="view-body">
            <el-row>
                <el-form class="inline-form" inline>
                    <el-form-item>
                        <el-button @click="$router.go(-1)"><i class="el-icon-arrow-left el-icon--left"/>返回
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button :disabled="departments.length === 0" :loading="submitting" @click="save"
                                   type="primary">保存
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-table :data="departmentTree" border ref="table" row-key="departmentId" size="small"
                          default-expand-all
                          :select-on-indeterminate="false"
                          @select-all="selectAll"
                          @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"/>
                    <el-table-column label="部门ID" prop="departmentId"/>
                    <el-table-column align="center" label="部门名称" prop="departmentName"/>
                    <el-table-column align="center" label="部门类型" width="200">
                        <template slot-scope="scope">
                            <span v-if="scope.row.departmentTypeKey">{{scope.row.departmentTypeName}}</span>
                            <br>
                            <span v-if="scope.row.departmentTypeKey">({{scope.row.departmentTypeKey}})</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="说明" prop="remark"/>
                </el-table>
            </el-row>
        </div>
    </el-row>
</template>
<script lang="ts">
  import {ID} from '@/api/http';
  import DepartmentApi from '@/api/user/departmentApi';
  import DutyApi from '@/api/user/dutyApi';
  import DataTransfer from '@/components/DataTransfer';
  import Department from '@/structure/department';
  import {ElTable} from 'element-ui/types/table';
  import {Component, Vue} from 'vue-property-decorator';

  @Component
  export default class Page extends Vue {
    public submitting: boolean = false;
    public dutyId!: ID;
    public dutyName: string = '';
    public departments: Department[] = [];
    public departmentTree: Department[] = [];
    public selected: Department[] = [];

    public created(): void {
      this.dutyId = this.$route.params.dutyId;
      this.dutyName = this.$route.query.dutyName as string;

      DepartmentApi.tree().then((res) => {
        this.departmentTree = res;
        this.departments = DataTransfer.treeToArray(res, null, null, true);

        this.$nextTick(() => {
          this.getDataList();
        });
      });
    }

    public handleSelectionChange(value: Department[]): void {
      this.selected = value;
    }

    public getDataList(): void {
      DutyApi.getDistribution(this.dutyId).then((res) => {
        this.departments.forEach((department) => {
          (this.$refs.table as ElTable).toggleRowSelection(department, res.includes(department.departmentId));
        });
      });
    }

    public selectAll(selection: Department[]): void {
      const isSelect = selection.some((el) => this.departmentTree.map((j) => j.departmentId).includes(el.departmentId));
      const isCancel = !this.departmentTree.every((el) => selection.map((j) => j.departmentId).includes(el.departmentId));
      if (isSelect) {
        selection
          .filter((el) => el.children && el.children.length > 0)
          .flatMap((el) => el.children)
          .forEach((item) => {
            this.toggleSelection(item, true);
          });
      }
      if (isCancel) {
        this.departmentTree
          .filter((el) => el.children && el.children.length > 0)
          .flatMap((el) => el.children)
          .forEach((item) => {
            this.toggleSelection(item, false);
          });
      }
    }

    public toggleSelection(row: Department, select: boolean): void {
      if (row) {
        this.$nextTick(() => {
          (this.$refs.table as ElTable).toggleRowSelection(row, select);
        });
      }
    }

    public save(): void {
      if (this.submitting) {
        return;
      }

      this.submitting = true;

      DutyApi.setDistribution(this.dutyId, this.selected.map((i) => i.departmentId)).then(() => {
        this.getDataList();
        this.submitting = false;
        this.$message.success('保存成功');
      }).catch(() => {
        this.submitting = false;
      });
    }
  }
</script>

